<template>
  <el-dialog
    :class="'order-info'"
    v-model="dialogVisible"
    v-if="load"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="绩效编辑"
    width="936"
    @close="handleClose"
    draggable
    :z-index="2000"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-align="right"
      label-width="0"
      size="default"
      class="pr-6"
      label-position="top"
    >
      <div>
        <span class="pictureTitle">人员信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="图片处理人员">
            <select-personnel
              v-model="form.designer_user"
              placeholder="图片处理人员"
              @changeName="clearUser($event, 'designer_user')"
            ></select-personnel>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="摄影人员">
            <select-personnel
              v-model="form.photography_user"
              placeholder="摄影人员"
              @changeName="clearUser($event, 'photography_user')"
            ></select-personnel>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="编辑人员">
            <select-personnel
              v-model="form.edit_user"
              placeholder="编辑人员"
              @changeName="clearUser($event, 'edit_user')"
            ></select-personnel>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="渲染人员">
            <select-personnel
              v-model="form.render_user"
              placeholder="渲染人员"
              @changeName="clearUser($event, 'render_user')"
            ></select-personnel>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="协助人员">
            <select-personnel
              v-model="form.assistance_user"
              placeholder="协助人员"
              @changeName="clearUser($event, 'assistance_user')"
            ></select-personnel>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="form.images_task_type == 1">
        <div>
          <span class="pictureTitle">任务要求</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="任务等级/类型">
              <VGroup>
                <el-select
                  v-model="form.task_priority"
                  placeholder="任务等级"
                  clearable
                  style="width: 100px"
                >
                  <el-option
                    v-for="item in options['assignment.ImagesAssignment']?.[0]
                      .taskPriorityText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <!-- <el-select
                  v-model="form.task_type"
                  placeholder="请选择任务类型"
                  multiple
                  clearable
                  style="width: 180px"
                >
                  <el-option
                    v-for="item in options['assignment.ImagesAssignment']?.[0]
                      .taskTypeText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select> -->
                <SelectTaskTypeByUid
                  v-model="form.task_type"
                  placeholder="请选择任务类型"
                  multiple
                  clearable
                ></SelectTaskTypeByUid>
              </VGroup>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务优先级">
              <el-select
                class="w-full"
                v-model="form.priority"
                placeholder="请选择任务优先级"
                clearable
              >
                <el-option
                  v-for="item in options['assignment.ImagesAssignment']?.[0]
                    .priorityText02"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品类型">
              <el-select
                class="w-full"
                v-model="form.product_type"
                placeholder="产品类型"
                clearable
              >
                <el-option
                  v-for="item in options['assignment.ImagesAssignment']?.[0]
                    .productTypeText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设计品牌">
              <select-brand
                class="w-full"
                v-model="form.brand_id"
                :multiple="true"
                placeholder="设计品牌"
              ></select-brand>
            </el-form-item>
          </el-col>
          <el-col class="relative" :span="8">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="精铺：至少30天工期；精品：至少40天工期<br/>按各部门排期，可自行调整"
              raw-content
              placement="top"
            >
              <svg-icon
                class="absolute left-24 top-1"
                icon-class="hint_cover2"
              ></svg-icon>
            </el-tooltip>

            <el-form-item label="预期完成时间">
              <el-date-picker
                style="width: 100%"
                :disabled-date="UtilEleDisabledDay"
                :disabled-hours="UtilEleDisabledHour"
                :disabled-minutes="UtilEleDisabledMinute"
                :disabled-seconds="UtilEleDisabledSecond"
                v-model="form.expected_time"
                type="datetime"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请输入"
              />
              <div>
                <el-button
                  size="small"
                  v-for="(item, index) in timeList"
                  :key="index"
                  @click="checkTime(item.value)"
                  >{{ item.label }}</el-button
                >
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片数量">
              <el-select
                class="w-full"
                v-model="form.image_total"
                placeholder="产品类型"
                clearable
              >
                <el-option
                  v-for="item in options['assignment.ImagesAssignment']?.[0]
                    .imageTotalText"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门分配时间">
              <el-date-picker
                style="width: 210px"
                v-model="form.timeData"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="defaultTime()"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>

    <el-tabs v-model="activeName">
      <el-tab-pane label="图片绩效" :name="1" v-if="form.images_task_type == 1">
        <el-tabs class="mt-4" v-model="activeSKU" type="card">
          <el-tab-pane
            :label="item.custom_sku"
            :name="item.custom_sku"
            v-for="(item, index) in form.images_assignment_sku"
            :key="item.custom_sku"
          >
            <template #label>
              {{ item.goods_sku?.sku || item.goods_sku?.custom_sku }}
            </template>
            <vxe-table
              class="mt-2"
              :data="item.images_assignment_list"
              height="400"
              style="width: 100%"
              :header-cell-style="{
                color: '#333333',
                background: '#F6FAFF',
              }"
              border
              ref="filedTable"
              :row-class-name="rowClassName"
            >
              <vxe-column field="tag" title="图片分页" width="100" />
              <vxe-column field="url" title="图片" width="100">
                <template #default="{ row }">
                  <div v-if="row.url">
                    <VImageSrc :src="row.url" width="60" height="60"></VImageSrc>
                  </div>
                </template>
              </vxe-column>
              <vxe-column field="field_name" title="图片标签">
                <template #header>
                  <div class="flex">
                    图片标签
                    <el-button class="ml-2" type="primary" link @click="checkedTag(index)"
                      >批量操作</el-button
                    >
                  </div>
                </template>
                <template #default="{ row, rowIndex }">
                  <div class="flex justify-between">
                    <div>
                      <template v-if="row.images_img_tag.length">
                        <el-tag
                          style="margin-right: 4px"
                          v-for="(item, k) in row.images_img_tag"
                          :key="k"
                          closable
                          type="success"
                          @close="handleTagDelete(row.images_img_tag, k)"
                        >
                          {{ item.tag_name }}
                          <span class="tabs_item" v-if="item.tag_count > 1"
                            >x {{ item.tag_count }}</span
                          >
                        </el-tag>
                      </template>
                      <div class="text-[#999999]" v-else>暂无标签</div>
                    </div>
                    <div class="ml-2">
                      <el-button
                        type="primary"
                        link
                        @click="checkedTag(index, rowIndex, row.images_img_tag)"
                        >编辑标签</el-button
                      >
                    </div>
                  </div>
                </template>
              </vxe-column>
              <vxe-column field="score" title="总分值" width="100">
                <template #default="{ row }">
                  {{ calculateTotalScore(row.images_img_tag) }}
                </template>
              </vxe-column>
            </vxe-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="图片任务" :name="2">
        <el-button class="mb-2 mt-2" type="primary" @click="handleMakeTag"
          >打标签</el-button
        >
        <el-table
          :data="form.images_task_tag"
          height="400"
          style="width: 100%"
          :header-cell-style="{
            color: '#333333',
            background: '#F6FAFF',
          }"
          border
          ref="filedTable"
          :row-class-name="rowClassName"
        >
          <el-table-column type="tag_type" label="任务标签" width="100">
            <template #default="{ row }">
              {{ row.images_tag?.tag_name }}
            </template>
          </el-table-column>
          <el-table-column prop="rule_type" label="标签绑定角色">
            <template #default="{ row }">
              {{ filterRule(row.rule_type) }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="绩效人员">
            <template #default="{ row }">
              {{ row.username || "--" }}
            </template>
          </el-table-column>
          <el-table-column prop="tag_count" label="标签数量" />
          <el-table-column prop="score" label="单个标签分值">
            <template #default="{ row }">
              {{ row.images_tag?.score }}
            </template>
          </el-table-column>
          <el-table-column prop="total_score" label="标签总分值">
            <template #default="{ row }">
              {{ Number(row.tag_count) * Number(row.images_tag?.score) }}
            </template>
          </el-table-column>
          <el-table-column prop="is_auto_relation_text" label="标签来源">
            <template #default="{ row }">
              {{ row.images_tag?.is_auto_relation_text }}
            </template>
          </el-table-column>
          <el-table-column prop="opearn" label="操作" width="120">
            <template #default="{ row, $index }">
              <el-button type="danger" link @click="handleDelete(row, $index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="截图绩效" :name="3">
        <template v-if="form.images_task_type == 1">
          <el-tabs class="mt-4" v-model="activeSKU" type="card">
            <el-tab-pane
              :label="item.custom_sku"
              :name="item.custom_sku"
              v-for="(item, index) in form.images_assignment_sku"
              :key="item.custom_sku"
            >
              <template #label>
                {{ item.goods_sku?.sku || item.goods_sku?.custom_sku }}
              </template>
              <vxe-table
                class="mt-2"
                :data="item.images_assignment_screenshot_list"
                height="400"
                style="width: 100%"
                :header-cell-style="{
                  color: '#333333',
                  background: '#F6FAFF',
                }"
                border
                ref="filedTable"
                :row-class-name="rowClassName"
              >
                <vxe-column field="url" title="图片" width="100">
                  <template #default="{ row }">
                    <div v-if="row.url">
                      <VImageSrc :src="row.url" width="60" height="60"></VImageSrc>
                    </div>
                  </template>
                </vxe-column>
                <vxe-column vxe-column="field_name" title="图片标签">
                  <template #header>
                    <div class="flex">
                      图片标签
                      <el-button
                        class="ml-2"
                        type="primary"
                        link
                        @click="checkedTag(index)"
                        >批量操作</el-button
                      >
                    </div>
                  </template>
                  <template #default="{ row, $index }">
                    <div class="flex justify-between">
                      <div>
                        <template v-if="row.images_img_tag.length">
                          <el-tag
                            style="margin-right: 4px"
                            v-for="(item, k) in row.images_img_tag"
                            :key="k"
                            closable
                            type="success"
                            @close="handleTagDelete(row.images_img_tag, k)"
                          >
                            {{ item.tag_name }}
                            <span class="tabs_item" v-if="item.tag_count > 1"
                              >x {{ item.tag_count }}</span
                            >
                          </el-tag>
                        </template>
                        <div class="text-[#999999]" v-else>暂无标签</div>
                      </div>
                      <div class="ml-2">
                        <el-button
                          type="primary"
                          link
                          @click="checkedTag(index, $index, row.images_img_tag)"
                          >编辑标签</el-button
                        >
                      </div>
                    </div>
                  </template>
                </vxe-column>
                <vxe-column field="score" title="总分值" width="100">
                  <template #default="{ row }">
                    {{ calculateTotalScore(row.images_img_tag) }}
                  </template>
                </vxe-column>
              </vxe-table>
            </el-tab-pane>
          </el-tabs>
        </template>
        <template v-else>
          <vxe-table
            class="mt-2"
            :data="form.images_url_list"
            height="400"
            style="width: 100%"
            :header-cell-style="{
              color: '#333333',
              background: '#F6FAFF',
            }"
            border
            ref="filedTable"
            :row-class-name="rowClassName"
          >
            <vxe-column field="url" title="图片" width="100">
              <template #default="{ row }">
                <div v-if="row.url">
                  <VImageSrc :src="row.url" width="60" height="60"></VImageSrc>
                </div>
              </template>
            </vxe-column>
            <vxe-column field="field_name" title="图片标签">
              <template #header>
                <div class="flex">
                  图片标签
                  <el-button class="ml-2" type="primary" link @click="checkedTag()"
                    >批量操作</el-button
                  >
                </div>
              </template>
              <template #default="{ row, $index }">
                <div class="flex justify-between">
                  <div>
                    <template v-if="row.images_img_tag.length">
                      <el-tag
                        style="margin-right: 4px"
                        v-for="(item, k) in row.images_img_tag"
                        :key="k"
                        closable
                        type="success"
                        @close="handleTagDelete(row.images_img_tag, k)"
                      >
                        {{ item.images_tag.tag_name }}
                        <span class="tabs_item" v-if="item.tag_count > 1"
                          >x {{ item.tag_count }}</span
                        >
                      </el-tag>
                    </template>
                    <div class="text-[#999999]" v-else>暂无标签</div>
                  </div>
                  <div class="ml-2">
                    <el-button
                      type="primary"
                      link
                      @click="checkedTag($index, null, row.images_img_tag)"
                      >编辑标签</el-button
                    >
                  </div>
                </div>
              </template>
            </vxe-column>
            <vxe-column field="score" title="总分值" width="100">
              <template #default="{ row }">
                {{ calculateTotalScore1(row.images_img_tag) }}
              </template>
            </vxe-column>
          </vxe-table>
        </template>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div class="w-full flex items-center justify-center relative">
        <div class="text-[#999999] text-sm absolute left-1 top-3">
          注：保存后修改绩效标签，并重新执行自动关联标签；
        </div>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="addTaskFun"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
  <batchImagesTag ref="batchImagesTagRef" @checked="checkedList"></batchImagesTag>
  <pictureDialogConption ref="diaLog" @success="success"></pictureDialogConption>
</template>

<script setup>
import pictureDialogConption from "./pictureDialog.vue";
import { nextTick, onMounted, ref, toRefs, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { getReportDetail, saveReport } from "../api";
import {
  UtilEleDisabledDay,
  UtilEleDisabledHour,
  UtilEleDisabledMinute,
  UtilEleDisabledSecond,
  UtilMatchPersonName,
} from "../../../../utils";
import SelectBrand from "@/components/SelectBrand";
import { formatDate } from "@/utils/index.js";
import VImageSrc from "@/components/Image/index.vue";
import batchImagesTag from "@/components/batchImagesTag/index";
import useCommonStore from "@/store/modules/common";
import { deepClone } from "@/utils/index.js";
import SelectTaskTypeByUid from "@/components/Selects/SelectTaskTypeByUid/index.vue";

const commonStore = useCommonStore();
const personnelOptions = computed(() => {
  if (!commonStore.personnelOptions) {
    commonStore.getOrganization();
  }
  return commonStore.personnelOptions;
});

const dialogVisible = ref(false);
let options = reactive(inject("options"));
const timeList = [
  {
    label: "40天",
    value: 40,
  },
  {
    label: "30天",
    value: 30,
  },
  {
    label: "15天",
    value: 15,
  },
  {
    label: "7天",
    value: 7,
  },
];

const data = reactive({
  form: {},
  handleType: null,
  title: null,
  activeName: 1,
  activeSKU: "",
  checkedSPU: null,
  firstIndex: "",
  secondIndex: "",
  load: false,
});

const { form, handleType, activeName, activeSKU, firstIndex, secondIndex, load } = toRefs(
  data
);

provide("handleType", handleType);
const addTaskFun = () => {
  const formData = Object.assign({}, form.value);

  if (formData.timeData?.length) {
    formData.assignment_time_start = formData.timeData[0];
    formData.assignment_time_end = formData.timeData[1];
  } else {
    formData.assignment_time_start = "";
    formData.assignment_time_end = "";
  }

  saveReport({
    ...formData,
  }).then(() => {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    dialogVisible.value = false;
    emit("query");
  });
};

const open = async (id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  getDetail(id);
  dialogVisible.value = true;
};

const getDetail = (id) => {
  getReportDetail({ task_id: id }).then((res) => {
    const data = res.data;
    form.value = data;
    if (data.assignment_time_start && data.assignment_time_end) {
      form.value.timeData = [data.assignment_time_start, data.assignment_time_end];
    }
    if (form.value.images_task_type == 1) {
      activeName.value = 1;
      activeSKU.value = data.images_assignment_sku[0].custom_sku;
    } else {
      activeName.value = 2;
    }
  });
};

const handleClose = () => {
  emit("close");
  dialogVisible.value = false;
};

const rowClassName = ({ row }) => {
  if (row.is_delete === 1) {
    return "hidden-row";
  }
  return "";
};

const emit = defineEmits(["close", "query"]);

defineExpose({ open });

const checkTime = (value) => {
  const date = new Date();
  date.setTime(date.getTime() + 3600 * 1000 * 24 * value);
  form.value.expected_time = formatDate(date);
};

const handleTagDelete = (images_img_tag, index) => {
  images_img_tag.splice(index, 1);
};

const batchImagesTagRef = ref();
const checkedTag = (first, second, list) => {
  console.log(first, second);
  firstIndex.value = first;
  secondIndex.value = second;
  const type = second ? "edit" : "batch";
  batchImagesTagRef.value.open(type, list);
};

const checkedList = (list) => {
  console.log(form.value.images_task_type);
  if (form.value.images_task_type == 2) {
    if (firstIndex.value == null || firstIndex.value == undefined) {
      form.value.images_url_list.map((i) => {
        i.images_img_tag = list.map((item) => {
          return {
            ...item,
            images_tag: {
              id: item.images_tag_id,
              tag_name: item.tag_name,
              score: item.score,
            },
          };
        });
        return i;
      });
    } else {
      form.value.images_url_list[firstIndex.value].images_img_tag = list.map((item) => {
        return {
          ...item,
          images_tag: {
            id: item.images_tag_id,
            tag_name: item.tag_name,
            score: item.score,
          },
        };
      });
    }
  } else if (activeName.value == 3) {
    if (secondIndex.value == null || secondIndex.value == undefined) {
      form.value.images_assignment_sku[
        firstIndex.value
      ].images_assignment_screenshot_list.map((i) => {
        i.images_img_tag = deepClone(list);
        return i;
      });
    } else {
      form.value.images_assignment_sku[
        firstIndex.value
      ].images_assignment_screenshot_list[secondIndex.value].images_img_tag = list;
    }
  } else {
    if (secondIndex.value == null || secondIndex.value == undefined) {
      form.value.images_assignment_sku[firstIndex.value].images_assignment_list.map(
        (i) => {
          i.images_img_tag = deepClone(list);
          return i;
        }
      );
    } else {
      form.value.images_assignment_sku[firstIndex.value].images_assignment_list[
        secondIndex.value
      ].images_img_tag = list;
    }
  }
};

const calculateTotalScore = (imagesImgTag) => {
  if (imagesImgTag.length == 0) {
    return 0;
  }
  return imagesImgTag.reduce(
    (total, item) => total + Number(item.score) * Number(item.tag_count),
    0
  );
};

const calculateTotalScore1 = (imagesImgTag) => {
  if (imagesImgTag.length == 0) {
    return 0;
  }
  return imagesImgTag.reduce(
    (total, item) => total + Number(item.images_tag?.score) * Number(item.tag_count),
    0
  );
};

const diaLog = ref();
const handleMakeTag = () => {
  diaLog.value.open("makeTagPerformance");
};

const success = (row) => {
  const findIndex = form.value.images_task_tag.findIndex(
    (i) =>
      i.images_tag_id == row.imagesTagId && i.rule_type == row.ruleType && !i.is_delete
  );
  if (findIndex == -1) {
    const user_id = form.value[row.ruleType];
    if (!user_id) {
      ElMessage.error("标签绑定角色没有选择人员,请选择人员再进行添加");
      return;
    }
    let item = {
      images_tag: {
        images_tag_id: row.imagesTagId,
        tag_name: row.tag_name,
        is_auto_relation: row.is_auto_relation,
        is_auto_relation_text: row.is_auto_relation_text,
        score: row.score,
        tag_type: 2,
      },
      tag_count: row.tagCount,
      rule_type: row.ruleType,
      images_tag_id: row.imagesTagId,
      username: findUserNamesById(user_id),
      user_id: user_id,
    };
    form.value.images_task_tag.push(item);
  } else {
    form.value.images_task_tag[findIndex].tag_count =
      form.value.images_task_tag[findIndex].tag_count + Number(row.tagCount);
  }
};

const findUserNamesById = (userIds) => {
  if (!userIds) return "";

  const options = personnelOptions.value; // 从外部获取用户数据
  const selectedUserNames = new Set();

  const dfs = (node) => {
    if (!node) return;
    if (node.user_id === userIds) {
      selectedUserNames.add(node.name);
    }

    if (node.sub && node.sub.length > 0) {
      for (const subNode of node.sub) {
        dfs(subNode);
      }
    }
  };

  for (const option of options) {
    dfs(option);
  }

  return Array.from(selectedUserNames)[0]; // 返回找到的用户名数组
};

// 过滤人员
const filterRule = (val) => {
  const find = options.value["assignment.ImagesTag"]?.[0].ruleTypeText.find(
    (i) => i.value === val
  );
  return find?.label;
};

// 图片任务删除
const handleDelete = (row, index) => {
  if (row.id) {
    row.is_delete = 1;
  } else {
    form.value.images_task_tag.splice(index, 1);
  }
};

const clearUser = (val, key) => {
  if (!val && form.value.images_task_tag.length) {
    const findIndex = form.value.images_task_tag.findIndex(
      (i) => !i.id && i.rule_type === key
    );
    if (findIndex === -1) return;
    ElMessageBox.confirm("清空人员信息会导致清除当前图片任务", "提示", {
      confirmButtonText: "确定",
      showCancelButton: false,
      showClose: false,
      type: "error",
    }).then(() => {
      form.value.images_task_tag.splice(findIndex, 1);
    });
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-scrollbar__view) {
  overflow-y: hidden;
}

:deep(.el-tabs__header) {
  margin-bottom: 0;
}

.listMr {
  margin-right: 18px;

  &:nth-of-type(6n + 6) {
    margin-right: 0;
  }
}

.listMrVideo {
  margin-right: 19px;

  &:nth-of-type(4n + 4) {
    margin-right: 0;
  }
}

.pictureTitle {
  font-weight: bold;
  position: relative;
  padding-left: 6px;
  font-size: 16px;
  color: #333333;

  &::after {
    content: "";
    height: 14px;
    width: 2px;
    position: absolute;
    left: 0;
    top: 0;
    align-items: center;
    background-color: #3366f1;
  }
}

.flex-1 {
  flex: 1;
}

.item_width {
  width: 566px;
}

.order-info {
  .pictureTitle {
    padding: 16px 0 16px 4px;
    position: relative;
    font-size: 16px;
    color: #0a1431;
    font-weight: 500;
    display: inline-block;
  }

  .pictureTitle::after {
    content: "";
    height: 14px;
    width: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    align-items: center;
    background-color: #3366f1;
  }

  .order-desc {
    padding-bottom: 8px;
    font-size: 14px;
    color: #3a4259;
  }

  .spu-txt {
    color: #3a4259;
    font-size: 14px;
  }

  .order-label,
  .order-value {
    display: inline-block;
  }

  .order-label {
    color: #999;
    width: 100px;
    text-align: right;
  }

  .order-value {
    color: #333;
  }

  .person-info {
    .el-col:nth-last-of-type(-n + 2) {
      padding-top: 16px;
    }
  }
}

:deep(.upload-file-uploader) {
  .el-upload.el-upload--text {
    button.el-button {
      padding: 8px 0;
    }
  }
}
</style>
<style lang="scss">
// .order-info {
//   .el-dialog__footer {
//     line-height: 30px !important;
//   }
// }

.hidden-row {
  display: none;
}

.tabs_item {
  // background-color: #fff;
  // border-color: #d9ecff;
  color: red;
}
</style>
